<template>  
 <!--vue3封装写法  -->
 <!-- v-model="visible"  从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏 -->
    <el-dialog  
      v-model="isVisible" 
      :width="dialogWidth"  
      :close-on-click-modal="false"  
      @close="handleClose"  
      center
    >  
      <template #title>  
        <span>{{ title }}</span>  
      </template>  
      <div>  
        <slot name="content"></slot>  
      </div>  
      <template #footer>  
        <el-button size="small" @click="handleCancel">取 消</el-button>  
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>  
      </template>  
    </el-dialog>  
  </template>  
  
  <script setup>  
  import { computed, defineProps, defineEmits } from 'vue';  
   // 从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏
//   const visible = defineModel('visible')
  // 使用 defineProps 来定义 props  
  const props = defineProps({  
    visible: {  
      type: Boolean,  
      default: false  
    },  
    modelValue: {  
      type: Boolean,  
      default: false  
    },  
    title: {  
      type: String,  
      default: '标题'  
    },  
    dialogWidth: {  
      type: String,  
      default: '35%'  
    }  
  });  

  // 使用 defineEmits 定义事件  
  const emit = defineEmits(['update:modelValue', 'cancel', 'submit']);  
  
  // 使用 computed 来管理 isVisible 状态  
  const isVisible = computed({  
    get() {  
      return props.visible;  
    },  
    set(value) {  
      emit('update:visible', value); // 触发 v-model 更新  
    }  
  });  

  
  const handleClose = () => {  
    isVisible.value = false; // 关闭对话框  
    // 这里是Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏
    // visible.value = false; // 提交后关闭对话框
  };  
  
  const handleCancel = () => {  
    isVisible.value = false; // 关闭对话框  
    // 这里是Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏
    // visible.value = false; // 提交后关闭对话框
    emit('cancel'); // 发出 cancel 事件  
  };  
  
  const handleSubmit = () => {  
    emit('submit'); // 发出 submit 事件  
    isVisible.value = false; // 提交后关闭对话框  
    // 这里是Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏
    // visible.value = false; // 提交后关闭对话框  
  };  
  </script>  
  
  <style scoped>  
  .dialog-header-title i {  
    color: #357ff9;  
  }  
  </style>